<template>
  <page-header-wrapper>
    <a-card>
      <a-row align="middle">
        <a-space class="table-operator">
          <a-button type="primary" style="margin-bottom: 0px;" @click="onEdit" icon="plus">新建</a-button>
        </a-space>
      </a-row>
      <s-table
        ref="tableList"
        size="default"
        row-key="id"
        :columns="columns"
        :data="loadData"
      >
        <template slot="addtime" slot-scope="addtime">
          {{ addtime | timeFormat }}
        </template>
        <a-space slot="action" slot-scope="text, template">
          <a-button size="small" title="编辑" @click="onEdit(template.id)">编辑</a-button>
          <a-button size="small" title="删除" @click="onDelete(template.id)">删除</a-button>
        </a-space>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { templateList, delTemplate } from '@/api/diy'
import { STable } from '@/components'

const columns = [
  {
    title: '模板ID',
    dataIndex: 'id',
    width: 100
  },
  {
    title: '名称',
    dataIndex: 'name',
    width: 100
  },
  {
    title: '创建时间',
    dataIndex: 'addtime',
    scopedSlots: { customRender: 'addtime' },
    width: 20
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 20,
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'DiyTemplate',
  components: {
    STable
  },
  data () {
    return {
      columns: columns,
      loadData: parameter => {
        return templateList(parameter)
          .then(res => {
            return res.data
          })
      }
    }
  },
  methods: {
    onEdit (id) {
      if (id > 0) {
        this.$router.push({ name: 'DiyTemplateEdit', query: { id: id } })
      } else {
        this.$router.push({ name: 'DiyTemplateEdit' })
      }
    },
    onDelete (id) {
      this.$confirm({
        title: '是否确认删除？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          const hide = this.$message.loading('删除中...')
          delTemplate({ id: id }).then(res => {
            hide()
            if (res.code === 0) {
              this.refresh()
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.search-item {
  margin-left: 10px;
}
</style>
